<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<div class="definewidth">
    <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
    <div class="div-echart ">
        <div id="main" style="width: 100%;height:500px;" class="center-block">
        </div>
    </div>
    <div id="listCon">
    </div>
</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>

<script type="text/javascript">
    var projectId = getQueryString('id');
    var startTime = getQueryString('startTime');
    var endTime = getQueryString('endTime');
    var projectName = getQueryString('projectName');
    var seriesData = [];
    $.ajax({
        type: "POST",
        url: ctx + "/projectTasktime/taskTimeStaffSpread",
        data:{
            projectId: projectId,
            startTime: startTime,
            endTime: endTime
        },
        success: function(data){
            if(data.code == 200){
                setlist('#listCon',data.data);

                //只显示前15
                var after15v = 0;
                for(var i=0;i<data.data.length;i++){
                    if(i>14){
                        after15v+=data.data[i].totalTaskTime;
                    }else{
                        seriesData[i]={
                            value:data.data[i].totalTaskTime.toFixed(1), name:data.data[i].name
                        };
                    }
                }
                if(data.data.length>15){
                    seriesData.push({value:after15v.toFixed(1), name:'其他'});
                }
                setEchart('main')
            } else {
                alert(data.msg)
            }
        }
    });
    function setlist(eleid,obj) {
        var html = '';
        for(var i=0;i<obj.length;i++){
            html += '<div class=div-list><p>'+obj[i].name+'</p><table id=table class="table table-bordered table-hover table-striped m10"><tr><th>项目阶段</th><th width="30%">人天</th><th width="30%">占比</th>';
            for(var j=0;j<obj[i].data.length;j++){
                html+= '<tr><td>'+obj[i].data[j].taskTimeTypeName+'<td>'+obj[i].data[j].taskTimeTotal.toFixed(1)+'<td>'+(obj[i].data[j].taskRatio*100).toFixed(2)+'%';
            }
            html += '</table></div>'
        }
        $(eleid).append(html);
    }
    var setEchart = function (eleId) {
        var myChart = echarts.init(document.getElementById(eleId));
        var option = {
            title : {
                text: projectName+'\n员工人天分布图',
                subtext:startTime?'日期范围：'+startTime+"至"+endTime +'    人天总计：'+ getQueryString('taskTime'):'' ,
                x:'center',
                top:15
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b}<br/>{c}人天 ({d}%)"
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '52%'],
                    data:seriesData,
                    itemStyle:{
                        normal:{
                            label:{
                                show: true,
                                formatter: '{b} : {c} ({d}%)'
                            },
                            labelLine :{show:true}
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    $("#backbtn").click(function () {
        /*window.location.href = "list.html";*/
        top.topManager.openPage({
            id : getQueryString('parentPageId'),
            isClose : true
        });
    });
</script>
</body>
</html>